<template>
	<div class="user-box">
		<goBack :name="name"></goBack>
		<div style="min-height:100vh;">
			<div style="text-align:center;" v-show="submitStatus==1||submitStatus==3">
				<p style="color:#477740;">恭喜你，入驻成功</p>
			</div>
			<van-form @failed="onFailed" @submit="onSubmit" :validate-trigger="['onChange', 'onSubmit']" :disabled="submitDisabled">
				<van-cell-group inset>
					<template v-if="submitStatus!==1">
						<van-field name="authType" :rules="[{ required: true, message: '请选择认证类型' }]">
							<template #label>
								<span class="required-label">认证类型</span>
							</template>
							<template #input>
								<van-radio-group v-model="field.authType" direction="horizontal">
									<van-radio :name="0">个人认证</van-radio>
									<van-radio :name="1">企业认证</van-radio>
								</van-radio-group>
							</template>
						</van-field>
						<van-field v-model="field.name" name="用户名" placeholder="联系人姓名"
							:rules="[{ required: true, message: '请填写联系人姓名' }]">
							<template #label>
								<span class="required-label">联系人姓名</span>
							</template>
						</van-field>
						<van-field v-model="field.phone" name="手机号" placeholder="联系人手机号"
							:rules="[{ required: true, message: '请填写联系人手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]">
							<template #label>
								<span class="required-label">联系人手机号</span>
							</template>
						</van-field>
						<!-- <van-field v-model="field.email" name="邮箱" placeholder="联系人邮箱" :rules="[
							{ required: true, message: '请填写联系人邮箱' },
							{ pattern:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确'}]" type="email">
							<template #label>
								<span class="required-label">联系人邮箱</span>
							</template>
						</van-field> -->
						<van-field v-model="field.idCardNumber" name="身份证号" placeholder="身份证号" :rules="[{ required: true, message: '请填写身份证号' },
							{ pattern:/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/i, message: '身份证号不正确'}]">
							<template #label>
								<span class="required-label">身份证号</span>
							</template>
						</van-field>
						<!-- 身份证正面 -->
						<van-field name="idCardFront" label="身份证正面" label-align="top" v-model="field.idCardFront"
							:rules="[{ required: true, message: '请上传身份证正面' }]">
							<template #label>
								<span class="required-label">身份证正面</span>
							</template>
							<template #input>
								<van-uploader v-model="idCardFrontImage" :after-read="afterRead" max-count="1" multiple
									accept="image/*" name="idCardFront" result-type="file" :deletable="deletable"
									:before-delete="handleBeforeDelete">
								</van-uploader>
								<!-- <Upload :action="action" accept="image/*" :filedList="filedList" :max-count="1" upload-text="上传身份证正面"
									name="idCardFront" @upload-success="handleSuccess" @on-delete="handleFileDelete" /> -->
							</template>
						</van-field>
						<!-- 身份证反面 -->
						<van-field name="idCardBack" label="身份证反面" label-align="top" v-model="field.idCardBack"
							:rules="[{ required: true, message: '请上传身份证反面' }]">
							<template #label>
								<span class="required-label">身份证反面</span>
							</template>
							<template #input>
								<van-uploader v-model="idCardBackImage" :after-read="afterRead" max-count="1" multiple
									accept="image/*" name="idCardBack" result-type="file" :deletable="deletable"
									:before-delete="handleBeforeDelete">
								</van-uploader>
							</template>
						</van-field>
						<!-- 身份证手持照 -->
						<van-field name="idCardHandheld" label="身份证手持照" label-align="top" v-model="field.idCardHandheld"
							:rules="[{ required: true, message: '请上传身份证手持照' }]">
							<template #label>
								<span class="required-label">身份证手持照</span>
							</template>
							<template #input>
								<van-uploader v-model="idCardHandheldImage" :after-read="afterRead" max-count="1" multiple
									accept="image/*" name="idCardHandheld" result-type="file" :deletable="deletable"
									:before-delete="handleBeforeDelete">
								</van-uploader>
							</template>
						</van-field>
						<!-- 身份证是否长期有效 -->
						<van-field name="radio" label="身份证是否长期有效" :rules="[{ required: true, message: '请选择身份证有效期' }]">
							<template #input>
								<van-radio-group v-model="field.idCardLongTerm" direction="horizontal"
									@change="idCardLongTermChange">
									<van-radio :name="1">是</van-radio>
									<van-radio :name="0">否</van-radio>
								</van-radio-group>
							</template>
						</van-field>
						<!-- 有效期开始 -->
						<van-field v-model="field.idCardValidityStart" is-link readonly name="datePicker1" label="身份证有效期开始"
							placeholder="有效期开始" @click="showPickerClick('datePicker1')"
							:rules="[{ required: true, message: '请选择身份证有效期开始时间' }]" />
						<!-- 有效期结束 -->
						<template v-if="field.idCardLongTerm==0">
							<van-field v-model="field.idCardValidityEnd" is-link readonly name="datePicker2"
								:rules="idCardValidityEndRules" label="身份证有效期结束" placeholder="有效期结束"
								@click="showPickerClick('datePicker2')" />
						</template>
						<!-- 店铺名称 -->
						<van-field v-model="field.storeName" name="店铺名称" placeholder="店铺名称"
							:rules="[{ required: true, message: '请填写店铺名称' }]">
							<template #label>
								<span class="required-label">店铺名称</span>
							</template>
						</van-field>
						<!-- 地区 -->
						<van-field v-model="resultArea" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
							@click="showArea = true" :rules="[{ required: true, message: '请选择地区' }]">
							<template #label>
								<span class="required-label">地区选择</span>
							</template>
						</van-field>
						<!-- 详细地址 -->
						<van-field v-model="field.deliveryAddress" name="详细地址" placeholder="详细地址"
							:rules="[{ required: true, message: '请填写详细地址' }]">
							<template #label>
								<span class="required-label">详细地址</span>
							</template>
						</van-field>
						<!-- 门头照 -->
						<van-field name="storefrontPhoto" label="门头照" label-align="top" v-model="field.storefrontPhoto"
							:rules="[{ required: true, message: '请上传门头照' }]">
							<template #label>
								<span class="required-label">门头照</span>
							</template>
							<template #input>

								<van-uploader v-model="storefrontPhotoImage" :after-read="afterRead" max-count="1" multiple
									accept="image/*" name="storefrontPhoto" result-type="file" :deletable="deletable"
									:before-delete="handleBeforeDelete">
								</van-uploader>
							</template>
						</van-field>
						<!-- 内景照 -->
						<van-field name="interiorPhoto" label="内景照" label-align="top" v-model="field.interiorPhoto"
							:rules="[{ required: true, message: '请上传内景照' }]">
							<template #label>
								<span class="required-label">内景照</span>
							</template>
							<template #input>
								<van-uploader v-model="interiorPhotoImage" :after-read="afterRead" max-count="1" multiple
									accept="image/*" name="interiorPhoto" result-type="file" :deletable="deletable"
									:before-delete="handleBeforeDelete">
								</van-uploader>
							</template>
						</van-field>
						<!-- 结算卡 -->
						<van-field name="settlementCardType" :rules="[{ required: true, message: '请选择结算卡类型' }]">
							<template #label>
								<span class="required-label">结算卡类型</span>
							</template>
							<template #input>
								<van-radio-group v-model="field.settlementCardType" direction="horizontal">
									<van-radio :name="0">对私结算</van-radio>
									<van-radio :name="1">对公结算</van-radio>
								</van-radio-group>
							</template>
						</van-field>
					</template>
					<!-- 银行卡卡号 -->
					<van-field v-model="field.bankCardNumber" name="bankCardNumber" placeholder="银行卡号"
						:rules="[{ required: true, message: '请填写银行卡号' }]">
						<template #label>
							<span class="required-label">银行卡号</span>
						</template>
					</van-field>
					<!-- 银行卡预留手机号 -->
					<van-field v-model="field.bankCardReservedPhone" name="bankCardReservedPhone" placeholder="银行卡预留手机号"
			            type="number" :rules="[{ required: true, message: '请填写银行卡预留手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]">
						<template #label>
							<span class="required-label">银行卡预留手机号</span>
						</template>
					</van-field>
					<!-- 银行卡正面照 -->
					<van-field name="bankCardFront" label="银行卡正面照" label-align="top" v-model="field.bankCardFront"
						:rules="[{ required: true, message: '请上传银行卡正面照' }]">
						<template #label>
							<span class="required-label">银行卡正面照</span>
						</template>
						<template #input>

							<van-uploader v-model="bankCardFrontImage" :after-read="afterRead" max-count="1" multiple
								accept="image/*" name="bankCardFront" result-type="file" :deletable="deletable"
								:before-delete="handleBeforeDelete">
							</van-uploader>
						</template>
					</van-field>
					<!-- 银行卡反面照 -->
					<van-field name="bankCardBack" label="银行卡反面照" label-align="top" v-model="field.bankCardBack"
						:rules="[{ required: true, message: '请上传银行卡反面照' }]">
						<template #label>
							<span class="required-label">银行卡反面照</span>
						</template>
						<template #input>
							<van-uploader v-model="bankCardBackImage" :after-read="afterRead" max-count="1" multiple
								accept="image/*" name="bankCardBack" result-type="file" :deletable="deletable"
								:before-delete="handleBeforeDelete">
							</van-uploader>
						</template>
					</van-field>

					<van-field v-model="field.bankName" placeholder="所属银行" name="bankName"
						:rules="[{ required: true, message: '请填写所属银行' }]">
						<template #label>
							<span class="required-label">所属银行</span>
						</template>
					</van-field>
					<van-field v-model="field.bankBranch" placeholder="银行网点" name="bankBranch"
						:rules="[{ required: true, message: '请填写银行网点' }]">
						<template #label>
							<span class="required-label">银行网点</span>
						</template>
					</van-field>
					<template v-if="submitStatus!==1">
						<div v-if="field.authType==1">
						<!-- 营业执照类型 -->
						<van-field name="businessLicenseType" :rules="[{ required: true, message: '请选择营业执照类型' }]">
							<template #label>
								<span class="required-label">营业执照类型</span>
							</template>
							<template #input>
								<van-radio-group v-model="field.businessLicenseType" direction="horizontal">
									<van-radio :name="0">个体户</van-radio>
									<van-radio :name="1">私营企业</van-radio>
								</van-radio-group>
							</template>
						</van-field>
						<!-- 营业执照名称 -->
						<van-field v-model="field.businessLicenseName" placeholder="营业执照名称" name="businessLicenseName"
							:rules="[{ required: true, message: '请填写营业执照名称' }]">
							<template #label>
								<span class="required-label">营业执照名称</span>
							</template>
						</van-field>
						<!-- 营业执照编号 -->
						<van-field v-model="field.businessLicenseCode" placeholder="营业执照编号" name="businessLicenseCode"
							:rules="[{ required: true, message: '请填写营业执照编号' }]">
							<template #label>
								<span class="required-label">营业执照编号</span>
							</template>
						</van-field>
						<!-- 营业执照图片 -->
						<van-field name="businessLicensePhoto" label="营业执照图片" label-align="top"
							v-model="field.businessLicensePhoto" :rules="[{ required: true, message: '请上传营业执照图片' }]">
							<template #label>
								<span class="required-label">营业执照图片</span>
							</template>
							<template #input>
								<!-- <Upload :action="action" accept="image/*" :max-count="1" upload-text="上传营业执照图片"
									name="businessLicensePhoto" @upload-success="handleSuccess"
									@on-delete="handleFileDelete" /> -->

								<van-uploader v-model="businessLicensePhotoImage" :after-read="afterRead" max-count="1"
									multiple accept="image/*" name="businessLicensePhoto" result-type="file" :deletable="deletable"
									:before-delete="handleBeforeDelete">
								</van-uploader>
							</template>
						</van-field>
						<!-- 法人姓名 -->
						<van-field v-model="field.legalPersonName" placeholder="法人姓名" name="legalPersonName"
							:rules="[{ required: true, message: '请填写法人姓名' }]">
							<template #label>
								<span class="required-label">法人姓名</span>
							</template>
						</van-field>
						<!-- 法人身份证号 -->
						<van-field v-model="field.legalPersonIdCard" placeholder="法人身份证号" name="legalPersonIdCard"
							:rules="[{ required: true, message: '请填写法人身份证号' },
							{ pattern:/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/i, message: '身份证号不正确'}]">
							<template #label>
								<span class="required-label">法人身份证号</span>
							</template>
						</van-field>
						<!-- 法人身份证正面照片 -->
						<van-field name="legalPersonIdCardFront" label="法人身份证正面照片" label-align="top"
							v-model="field.legalPersonIdCardFront"
							:rules="[{ required: true, message: '请上传法人身份证正面照片' }]">
							<template #label>
								<span class="required-label">法人身份证正面照片</span>
							</template>
							<template #input>
								<van-uploader v-model="legalPersonIdCardFrontImage" :after-read="afterRead"
									max-count="1" multiple accept="image/*" name="legalPersonIdCardFront" :deletable="deletable"
									result-type="file" :before-delete="handleBeforeDelete">
								</van-uploader>
							</template>
						</van-field>
						<!-- 法人身份证反面照片 -->
						<van-field name="legalPersonIdCardBack" label="法人身份证反面照片" label-align="top"
							v-model="field.legalPersonIdCardBack"
							:rules="[{ required: true, message: '请上传法人身份证反面照片' }]">
							<template #label>
								<span class="required-label">法人身份证反面照片</span>
							</template>
							<template #input>
								<van-uploader v-model="legalPersonIdCardBackImage" :after-read="afterRead" max-count="1"
									multiple accept="image/*" name="legalPersonIdCardBack" result-type="file" :deletable="deletable"
									:before-delete="handleBeforeDelete">
								</van-uploader>
							</template>
						</van-field>
						<!-- 法人手持身份证照片 -->
						<van-field name="legalPersonIdCardHandheld" label="法人手持身份证照片" label-align="top"
							v-model="field.legalPersonIdCardHandheld"
							:rules="[{ required: true, message: '请上传法人手持身份证照片' }]">
							<template #label>
								<span class="required-label">法人手持身份证照片</span>
							</template>
							<template #input>
								<van-uploader v-model="legalPersonIdCardHandheldImage" :after-read="afterRead"
									max-count="1" multiple accept="image/*" name="legalPersonIdCardHandheld" :deletable="deletable"
									result-type="file" :before-delete="handleBeforeDelete">
								</van-uploader>
							</template>
						</van-field>
						<!-- 法人身份证是否长期有效 -->
						<van-field name="legalPersonIdCardLongTerm" label="法人身份证是否长期有效"
							:rules="[{ required: true, message: '请选择法人身份证是否长期有效' }]">
							<template #input>
								<van-radio-group v-model="field.legalPersonIdCardLongTerm" direction="horizontal"
									@change="legalPersonIdCardLongTermChange">
									<van-radio :name="1">是</van-radio>
									<van-radio :name="0">否</van-radio>
								</van-radio-group>
							</template>
						</van-field>
						<van-field v-model="field.legalPersonIdCardValidityStart" is-link readonly name="datePicker3"
							:rules="[{ required: true, message: '请选择法人身份证有效期开始时间' }]" label="法人身份证有效期开始"
							placeholder="有效期开始" @click="showPickerClick('datePicker3')" />
						<template v-if="field.legalPersonIdCardLongTerm==0">
							<van-field v-model="field.legalPersonIdCardValidityEnd" is-link readonly name="datePicker4"
								:rules="legalPersonIdCardValidityEndRules" label="法人身份证有效期结束" placeholder="有效期结束"
								@click="showPickerClick('datePicker4')" />
						</template>
					</div>
					</template>
					<!-- 汇付id -->
					<!-- <van-field v-model="field.huifuId" name="huifuId" placeholder="汇付id"
						:rules="[{ required: true, message: '请填写汇付id' }]">
						<template #label>
							<span class="required-label">汇付id</span>
						</template>
					</van-field> -->
				</van-cell-group>
				<div style="margin: 16px 16px 0;padding-bottom: 16px;">
					<van-button round block type="primary" native-type="submit"
						:disabled="submitStatus == 0? true : false">
						{{ submitValues }}
					</van-button>
					<div v-show="zfbshow">
						<van-button round block type="primary" @click="paycode" style="margin: 20px 0;">
							{{ zfbvalue }}
						</van-button>
					</div>
					<!-- <p class="wxshow" @click="paycode"></p> -->
				</div>
			</van-form>
		</div>
		<!-- 组件 -->
		<van-popup v-model:show="showPicker" destroy-on-close position="bottom" safe-area-inset-bottom>
			<van-date-picker v-model="pickerValue" @confirm="onConfirm" @cancel="showPicker = false" :max-date="maxDate"
				:min-date="minDate" />
		</van-popup>
		<!-- 地区 -->
		<van-popup v-model:show="showArea" destroy-on-close position="bottom" safe-area-inset-bottom>
			<van-area :area-list="areaList" :model-value="pickerValueArea" @confirm="onConfirmArea"
				@cancel="showArea  = false" />
		</van-popup>
	</div>
</template>

<script setup>
	import GoBack from '@/components/goBack.vue'
	import axios from "axios";
	import Upload from '@/components/upLoad.vue'

	import {
		useRouter
	} from 'vue-router';
	const router = useRouter();

	import {
		ref,
		computed,
		onMounted
	} from "vue";
	import {
		areaList
	} from '@vant/area-data';
	import {
		deviceMerchantsAdd,
		deviceMerchantsUpdate,
		deviceMerchantsInformation,
	} from '@/api/merchant';
	import {
		getToken
	} from '@/utils/auth';
	import {
		showToast,
		showDialog,
	} from 'vant';
	import {
		getUserid,
		setIdentity
	} from '@/utils/auth';
	onMounted(() => {
		getStatus();
	});
	const idCardFrontImage = ref([])
	const idCardBackImage = ref([])
	const idCardHandheldImage = ref([])
	const storefrontPhotoImage = ref([])
	const interiorPhotoImage = ref([])
	const bankCardFrontImage = ref([])
	const bankCardBackImage = ref([])
	const businessLicensePhotoImage = ref([])
	const legalPersonIdCardFrontImage = ref([])
	const legalPersonIdCardBackImage = ref([])
	const legalPersonIdCardHandheldImage = ref([])
	const deletable = ref(true);

	const submitStatus = ref(-1);
	const submitDisabled = ref(false);
	const submitValues = ref('提交审核');
	const zfbshow = ref(false);
	const zfbvalue = ref('点击微信支付宝授权');
	const zfbplatform = ref('');
	const zfbgdyLink = ref('');





	const filedList = ref([])
	const field = ref({
		status: 0,
		huifuId: 0, //汇付id
		userId: getUserid(),
		authType: 1, //认证类型
		name: '', //姓名
		phone: '', //手机号
		email: '', //邮箱
		idCardNumber: '', //身份证
		idCardFront: '', //身份证正面
		idCardBack: '', //身份证反面
		idCardHandheld: '', //身份证手持照
		idCardLongTerm: 0, //身份证是否长期有效
		idCardValidityStart: '', //身份证有效期开始
		idCardValidityEnd: '', //身份证有效期结束
		storeName: '', //店铺名称
		merchantName: '', //商户名称
		bankCardProvince: '', //省
		bankCardCity: '',
		bankCardArea: '',
		deliveryAddress: '', //详细地址
		storefrontPhoto: '', //门头照
		interiorPhoto: '', //内景
		settlementCardType: 0, //结算卡类型
		bankCardNumber: '', //银行卡号
		bankCardReservedPhone: '', //预留手机号
		bankCardFront: '', //银行卡正面
		bankCardBack: '', //银行卡反面
		bankName: '', //所属银行
		businessLicenseType: 0, //营业执照类型
		businessLicenseName: '', //营业执照名称
		businessLicenseCode: '', //营业执照编码
		businessLicensePhoto: '', //营业执照照片
		legalPersonName: '', //法人姓名
		legalPersonIdCard: '', //法人身份证号
		legalPersonIdCardFront: '', //法人身份证正面照
		legalPersonIdCardBack: '', //法人身份证反面照
		legalPersonIdCardHandheld: '', //法人手持身份证照
		legalPersonIdCardLongTerm: 0, //法人身份证是否长期有效
		legalPersonIdCardValidityStart: '',
		legalPersonIdCardValidityEnd: '',
	})
	const getStatus = async () => {
		try {
			const userId = {
				userId: getUserid(),
			};
			const response = await deviceMerchantsInformation(userId);
			// field.value.idCardFront = response.data.idCardFront
			if (response.data.userId) {
				submitStatus.value = response.data.status
				field.value = response.data
				zfbplatform.value = response.data.platform
				zfbgdyLink.value = response.data.gdyLink
        // if(response.data.platform==1){
				// 	zfbvalue.value = '点击链接授权'
				// }else {
        //   zfbvalue.value = '点击微信支付宝授权'
        // }
        zfbvalue.value = '点击微信支付宝授权'
				if(response.data.isPass){
					zfbshow.value = true
				}
				if (response.data.status == 0) {
					submitValues.value = '审核中'
					submitDisabled.value = true
					deletable.value = false
				} else if (response.data.status == 1) {
					submitValues.value = '提交更新银行卡'
					submitDisabled.value = false
					deletable.value = true
					// setIdentity(1)
				} else if (response.data.status == 2) {
					submitValues.value = '审核被拒，重新提交'
					submitDisabled.value = false
					deletable.value = true
				} else if (response.data.status == 3) {
					submitValues.value = '重新提交审核'
					submitDisabled.value = false
					deletable.value = true
				}
				if (response.data.idCardBack) {
					idCardBackImage.value.push({
						status: 'done',
						url: response.data.idCardBack
					})
				}
				if (response.data.idCardFront) {
					idCardFrontImage.value.push({
						status: 'done',
						url: response.data.idCardFront
					})
				}
				if (response.data.idCardHandheld) {
					idCardHandheldImage.value.push({
						status: 'done',
						url: response.data.idCardHandheld
					})
				}
				if (response.data.storefrontPhoto) {
					storefrontPhotoImage.value.push({
						status: 'done',
						url: response.data.storefrontPhoto
					})
				}
				if (response.data.interiorPhoto) {
					interiorPhotoImage.value.push({
						status: 'done',
						url: response.data.interiorPhoto
					})
				}
				if (response.data.bankCardFront) {
					bankCardFrontImage.value.push({
						status: 'done',
						url: response.data.bankCardFront
					})
				}
				if (response.data.bankCardBack) {
					bankCardBackImage.value.push({
						status: 'done',
						url: response.data.bankCardBack
					})
				}
				if (response.data.businessLicensePhoto) {
					businessLicensePhotoImage.value.push({
						status: 'done',
						url: response.data.businessLicensePhoto
					})
				}
				if (response.data.legalPersonIdCardFront) {
					legalPersonIdCardFrontImage.value.push({
						status: 'done',
						url: response.data.legalPersonIdCardFront
					})
				}
				if (response.data.legalPersonIdCardBack) {
					legalPersonIdCardBackImage.value.push({
						status: 'done',
						url: response.data.legalPersonIdCardBack
					})
				}
				if (response.data.legalPersonIdCardHandheld) {
					legalPersonIdCardHandheldImage.value.push({
						status: 'done',
						url: response.data.legalPersonIdCardHandheld
					})
				}
				delete field.value.createTime
				delete field.value.createBy
				delete field.value.updateBy
				delete field.value.updateTime

				resultArea.value =
					`${response.data.bankCardProvince + '-' + response.data.bankCardCity + '-' + response.data.bankCardArea}`;
			}
		} catch (err) {
			//console.error('获取数据失败', err);

		}
	};
	const apiDomain = ref(import.meta.env.VITE_API_DOMAIN);
	const action = `${apiDomain.value}/deviceUsers/upload`;
	const name = ref('入驻资料');


	const result = ref('');
	const showPicker = ref(false);
	// 动态最大日期（30 年后）
	const maxDate = computed(() => {
		const date = new Date();
		date.setFullYear(date.getFullYear() + 30);
		return date;
	});
	const minDate = new Date(1950, 0, 1);
	const pickerValue = ref([
		new Date().getFullYear().toString(),
		(new Date().getMonth() + 1).toString().padStart(2, '0')
	]);
	const mark = ref('')
	const onConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		result.value = selectedValues.join('-');
		pickerValue.value = selectedValues;
		showPicker.value = false;
		// 身份证有效期
		if (mark.value === 'datePicker1') {
			field.value.idCardValidityStart = result.value
			// 结束
		} else if (mark.value === 'datePicker2') {
			field.value.idCardValidityEnd = result.value
		} else if (mark.value === 'datePicker3') {
			field.value.legalPersonIdCardValidityStart = result.value
		} else if (mark.value === 'datePicker4') {
			field.value.legalPersonIdCardValidityEnd = result.value
		}
	}
	//身份证长期不用验证
	const idCardValidityEndRules = ref([{
		required: true,
		message: '请选择身份证有效期结束时间'
	}]);
	const idCardLongTermChange = () => {
		if (field.value.idCardLongTerm == 0) {
			idCardValidityEndRules.value = [{
				required: true,
				message: '请选择身份证有效期结束时间'
			}];
		} else {
			idCardValidityEndRules.value = [];
		}
	};
	//法人身份证
	const legalPersonIdCardValidityEndRules = ref([{
		required: true,
		message: '请选择法人身份证有效期结束时间'
	}]);
	const legalPersonIdCardLongTermChange = () => {
		if (field.value.legalPersonIdCardLongTerm == 0) {
			legalPersonIdCardValidityEndRules.value = [{
				required: true,
				message: '请选择法人身份证有效期结束时间'
			}];
		} else {
			legalPersonIdCardValidityEndRules.value = [];
		}
	};
	//地区
	const resultArea = ref('');
	const showArea = ref(false);
	const pickerValueArea = ref('');
	const onConfirmArea = ({
		selectedValues,
		selectedOptions
	}) => {
		pickerValueArea.value = selectedValues.length ? selectedValues[selectedValues.length - 1] : '';
		resultArea.value = selectedOptions.map((item) => item.text).join('-');
		field.value.bankCardProvince = selectedOptions[0].text;
		field.value.bankCardCity = selectedOptions[1].text;
		field.value.bankCardArea = selectedOptions[2].text;
		showArea.value = false;
	};
	//选择时间
	const showPickerClick = (type) => {
		mark.value = type
		showPicker.value = true
	}
	const onSubmit = async (values) => {
		// 身份证长期有效
		if (field.value.idCardLongTerm == 1) {
			field.value.idCardValidityEnd = '';
		}
		if (field.value.legalPersonIdCardLongTerm == 1) {
			field.value.legalPersonIdCardValidityEnd = '';
		}
		field.value.merchantName = field.value.name;
		try {
			//console.log('submit', field.value);
      // 添加 loading 状态
      const loading = showToast({
        type: 'loading',
        message: '提交中...',
        forbidClick: true,
        duration: 0 // 持续显示，直到手动清除
      });
			if (field.value.id) {
				const response = await deviceMerchantsUpdate(field.value);
				if (response.status == 200) {
					showToast({
						type: 'success',
						message: '提交成功',
						forbidClick: true,
						duration: 1000
					});
          // 清除 loading
          loading.close();
					setTimeout(() => {
						window.history.back();
					}, 1000)
				} else {
					//console.log(123)
					showToast({
						type: 'fail',
						message: response.desc || '提交失败',
						forbidClick: true,
						duration: 1000
					});
          // 清除 loading
          loading.close();
				}
			} else {
				const response = await deviceMerchantsAdd(field.value);
				if (response.status == 200) {
					showToast({
						type: 'success',
						message: '提交成功',
						forbidClick: true,
						duration: 1000
					});
          // 清除 loading
          loading.close();
					setTimeout(() => {
						window.history.back();
					}, 1000)
				} else {
					showToast({
						type: 'fail',
						message: response.desc || '提交失败',
						forbidClick: true,
						duration: 1000
					});
				}
			}
		} catch (err) {
			showToast({
				type: 'fail',
				message: err.desc || '提交失败',
				forbidClick: true,
				duration: 1000
			});
      // 清除 loading
      loading.close();
		}
	};
	const onFailed = (errorInfo) => {
		//console.log('failed', errorInfo);
	};
	//上传成功回调
	const handleSuccess = ({
		name,
		fileData,
		list
	}) => {
		// 上传一张直接赋值fileData.data.url
		switch (name) {
			case 'idCardFront':
				field.value.idCardFront = fileData.data.url
				break;
			case 'idCardBack':
				field.value.idCardBack = fileData.data.url
				break;
			case 'idCardHandheld':
				field.value.idCardHandheld = fileData.data.url
				break;
			case 'storefrontPhoto':
				field.value.storefrontPhoto = fileData.data.url
				break;
			case 'interiorPhoto':
				field.value.interiorPhoto = fileData.data.url
				break;
			case 'bankCardFront':
				field.value.bankCardFront = fileData.data.url
				break;
			case 'bankCardBack':
				field.value.bankCardBack = fileData.data.url;
				break;
			case 'businessLicensePhoto':
				field.value.businessLicensePhoto = fileData.data.url;
				break;
			case 'legalPersonIdCardFront':
				field.value.legalPersonIdCardFront = fileData.data.url;
				break;
			case 'legalPersonIdCardBack':
				field.value.legalPersonIdCardBack = fileData.data.url;
				break;
			case 'legalPersonIdCardHandheld':
				field.value.legalPersonIdCardHandheld = fileData.data.url;
				break;

			default:
				break;
		}
	}
	// 处理子组件传递的删除文件信息
	const handleFileDelete = ({
		name,
		file
	}) => {
		switch (name) {
			case 'idCardFront':
				field.value.idCardFront = ''
				break;
			case 'idCardBack':
				field.value.idCardBack = ''
				break;
			case 'idCardHandheld':
				field.value.idCardHandheld = ''
				break;
			case 'storefrontPhoto':
				field.value.storefrontPhoto = ''
				break;
			case 'interiorPhoto':
				field.value.interiorPhoto = ''
				break;
			case 'bankCardFront':
				field.value.bankCardFront = ''
				break;
			case 'bankCardBack':
				field.value.bankCardBack = '';
				break;
			case 'businessLicensePhoto':
				field.value.businessLicensePhoto = '';
				break;
			case 'legalPersonIdCardFront':
				field.value.legalPersonIdCardFront = '';
				break;
			case 'legalPersonIdCardBack':
				field.value.legalPersonIdCardBack = '';
				break;
			case 'legalPersonIdCardHandheld':
				field.value.legalPersonIdCardHandheld = '';
				break;
			default:
				break;
		}
	};
	const handleDelete = () => {

	}

  // const afterRead = async (file, res) => {
  //   const uploadname = res.name;
  //   const files = Array.isArray(file) ? file : [file];
  //
  //   for (const item of files) {
  //     try {
  //       console.log(item);
  //       // 检查文件大小
  //       const maxSize = 3;
  //       const maxSizeBytes = maxSize * 1024 * 1024;
  //       const isValidSize = item.file.size <= maxSizeBytes;
  //
  //       if (!isValidSize) {
  //         showToast({
  //           type: 'fail',
  //           message: `文件大小不能超过${maxSize}MB`
  //         });
  //
  //         // 根据上传类型移除对应的图片
  //         switch (uploadname) {
  //           case 'idCardFront':
  //             idCardFrontImage.value = idCardFrontImage.value.filter(f => f !== item);
  //             break;
  //           case 'idCardBack':
  //             idCardBackImage.value = idCardBackImage.value.filter(f => f !== item);
  //             break;
  //           case 'idCardHandheld':
  //             idCardHandheldImage.value = idCardHandheldImage.value.filter(f => f !== item);
  //             break;
  //           case 'storefrontPhoto':
  //             storefrontPhotoImage.value = storefrontPhotoImage.value.filter(f => f !== item);
  //             break;
  //           case 'interiorPhoto':
  //             interiorPhotoImage.value = interiorPhotoImage.value.filter(f => f !== item);
  //             break;
  //           case 'bankCardFront':
  //             bankCardFrontImage.value = bankCardFrontImage.value.filter(f => f !== item);
  //             break;
  //           case 'bankCardBack':
  //             bankCardBackImage.value = bankCardBackImage.value.filter(f => f !== item);
  //             break;
  //           case 'businessLicensePhoto':
  //             businessLicensePhotoImage.value = businessLicensePhotoImage.value.filter(f => f !== item);
  //             break;
  //           case 'legalPersonIdCardFront':
  //             legalPersonIdCardFrontImage.value = legalPersonIdCardFrontImage.value.filter(f => f !== item);
  //             break;
  //           case 'legalPersonIdCardBack':
  //             legalPersonIdCardBackImage.value = legalPersonIdCardBackImage.value.filter(f => f !== item);
  //             break;
  //           case 'legalPersonIdCardHandheld':
  //             legalPersonIdCardHandheldImage.value = legalPersonIdCardHandheldImage.value.filter(f => f !== item);
  //             break;
  //         }
  //
  //         return; // 直接返回，不执行上传
  //       }
  //
  //       const index = 0;
  //       const formData = new FormData();
  //       formData.append('file', item.file);
  //
  //       // 使用 axios 上传
  //       const response = await axios.post(action, formData, {
  //         headers: {
  //           'Content-Type': 'multipart/form-data',
  //           'token': '' + getToken(),
  //         }
  //       });
  //
  //       if (response.status === 200) {
  //         // ... 原有成功处理逻辑 ...
  //       } else {
  //         showToast({
  //           type: 'fail',
  //           message: '上传失败'
  //         });
  //       }
  //     } catch (error) {
  //       showToast({
  //         type: 'fail',
  //         message: '上传失败'
  //       });
  //     }
  //   }
  // };



	const clearImg = async (uploadname) => {
    // 过滤掉删除的文件并更新 modelValue
    switch (uploadname) {
      case 'idCardFront':
        idCardFrontImage.value = [];
        break;
      case 'idCardBack':
        idCardBackImage.value = [];
        break;
      case 'idCardHandheld':
        idCardHandheldImage.value = [];
        break;
      case 'storefrontPhoto':
        storefrontPhotoImage.value = [];
        break;
      case 'interiorPhoto':
        interiorPhotoImage.value = [];
        break;
      case 'bankCardFront':
        bankCardFrontImage.value = [];
        break;
      case 'bankCardBack':
        bankCardBackImage.value = [];
        break;
      case 'businessLicensePhoto':
        businessLicensePhotoImage.value = [];
        break;
      case 'legalPersonIdCardFront':
        legalPersonIdCardFrontImage.value = [];
        break;
      case 'legalPersonIdCardBack':
        legalPersonIdCardBackImage.value = [];
        break;
      case 'legalPersonIdCardHandheld':
        legalPersonIdCardHandheldImage.value = [];
        break;

      default:
        break;
    }
  };
	const afterRead = async (file, res) => {
		const uploadname = res.name;
		const files = Array.isArray(file) ? file : [file];
		for (const item of files) {
			try {
        console.log(item)
        // 检查文件大小
        const maxSize = 10;
        const maxSizeBytes = maxSize * 1024 * 1024;
        const isValidSize = item.file.size <= maxSizeBytes;
        console.log("maxSizeBytes:"+maxSizeBytes)
        console.log("item.size"+item.file.size)
        if (!isValidSize) {
          showToast({
            type: 'fail',
            message: `文件大小不能超过`+maxSize+'MB'
          });
          clearImg(uploadname);
          return;
        }
				const index = 0;
				// 找到当前文件在 idCardFrontImage 中的索引
				// const index = idCardBackImage.value.findIndex(f => f === item);
				// if (index === -1) continue;

				// 更新状态为上传中
				// idCardBackImage.value[index].status = 'uploading';

				// 这里替换为实际的上传逻辑
				const formData = new FormData()

				formData.append('file', item.file)

        const loading = showToast({
          type: 'loading',
          message: '上传中...',
          forbidClick: true,
          duration: 0 // 持续显示，直到手动清除
        });
				// 使用 axios 上传
				const response = await axios.post(action, formData, {
					headers: {
						'Content-Type': 'multipart/form-data',
						'token': '' + getToken(),
					}
				});
				if (response.status === 200) {
          loading.close();
					switch (uploadname) {
						case 'idCardFront':
							idCardFrontImage.value[index].status = 'done';
							idCardFrontImage.value[index].url = response.data.data.url;
							field.value.idCardFront = response.data.data.url
							break;
						case 'idCardBack':
							idCardBackImage.value[index].status = 'done';
							idCardBackImage.value[index].url = response.data.data.url;
							field.value.idCardBack = response.data.data.url
							break;
						case 'idCardHandheld':
							idCardHandheldImage.value[index].status = 'done';
							idCardHandheldImage.value[index].url = response.data.data.url;
							field.value.idCardHandheld = response.data.data.url
							break;
						case 'storefrontPhoto':
							storefrontPhotoImage.value[index].status = 'done';
							storefrontPhotoImage.value[index].url = response.data.data.url;
							field.value.storefrontPhoto = response.data.data.url
							break;
						case 'interiorPhoto':
							interiorPhotoImage.value[index].status = 'done';
							interiorPhotoImage.value[index].url = response.data.data.url;
							field.value.interiorPhoto = response.data.data.url
							break;
						case 'bankCardFront':
							bankCardFrontImage.value[index].status = 'done';
							bankCardFrontImage.value[index].url = response.data.data.url;
							field.value.bankCardFront = response.data.data.url
							break;
						case 'bankCardBack':
							bankCardBackImage.value[index].status = 'done';
							bankCardBackImage.value[index].url = response.data.data.url;
							field.value.bankCardBack = response.data.data.url
							break;
						case 'businessLicensePhoto':
							businessLicensePhotoImage.value[index].status = 'done';
							businessLicensePhotoImage.value[index].url = response.data.data.url;
							field.value.businessLicensePhoto = response.data.data.url
							break;
						case 'legalPersonIdCardFront':
							legalPersonIdCardFrontImage.value[index].status = 'done';
							legalPersonIdCardFrontImage.value[index].url = response.data.data.url;
							field.value.legalPersonIdCardFront = response.data.data.url
							break;
						case 'legalPersonIdCardBack':
							legalPersonIdCardBackImage.value[index].status = 'done';
							legalPersonIdCardBackImage.value[index].url = response.data.data.url;
							field.value.legalPersonIdCardBack = response.data.data.url
							break;
						case 'legalPersonIdCardHandheld':
							legalPersonIdCardHandheldImage.value[index].status = 'done';
							legalPersonIdCardHandheldImage.value[index].url = response.data.data.url;
							field.value.legalPersonIdCardHandheld = response.data.data.url
							break;

						default:
							break;
					}
				} else {
					idCardFrontImage.value[index].status = 'failed';
					showToast({
						type: 'fail',
						message: '上传失败'
					});
				}
        loading.close();
			} catch (error) {
				idCardFrontImage.value[index].status = 'failed';
				showToast({
					type: 'fail',
					message: '上传失败'
				});
        loading.close();
			}
		}
	}
	const handleBeforeDelete = (file, res) => {
		const uploadname = res.name;
		return new Promise((resolve, reject) => {
			showDialog({
				title: "确认删除",
				message: "确定要删除该文件吗？",
				showCancelButton: true
			}).then(() => {
				// 过滤掉删除的文件并更新 modelValue
				switch (uploadname) {
					case 'idCardFront':
						idCardFrontImage.value = idCardFrontImage.value.filter(item => item !== file);
						break;
					case 'idCardBack':
						idCardBackImage.value = idCardBackImage.value.filter(item => item !== file);
						break;
					case 'idCardHandheld':
						idCardHandheldImage.value = idCardHandheldImage.value.filter(item => item !==
							file);
						break;
					case 'storefrontPhoto':
						storefrontPhotoImage.value = storefrontPhotoImage.value.filter(item => item !==
							file);
						break;
					case 'interiorPhoto':
						interiorPhotoImage.value = interiorPhotoImage.value.filter(item => item !==
							file);
						break;
					case 'bankCardFront':
						bankCardFrontImage.value = bankCardFrontImage.value.filter(item => item !==
							file);
						break;
					case 'bankCardBack':
						bankCardBackImage.value = bankCardBackImage.value.filter(item => item !==
							file);
						break;
					case 'businessLicensePhoto':
						businessLicensePhotoImage.value = businessLicensePhotoImage.value.filter(
							item => item !== file);
						break;
					case 'legalPersonIdCardFront':
						legalPersonIdCardFrontImage.value = legalPersonIdCardFrontImage.value.filter(
							item => item !== file);
						break;
					case 'legalPersonIdCardBack':
						legalPersonIdCardBackImage.value = legalPersonIdCardBackImage.value.filter(
							item => item !== file);
						break;
					case 'legalPersonIdCardHandheld':
						legalPersonIdCardHandheldImage.value = legalPersonIdCardHandheldImage.value
							.filter(item => item !== file);
						break;

					default:
						break;
				}
				// 触发 on-delete 事件，通知父组件
				// emit('on-delete', {
				// 	name: props.name, // 携带标识符
				// 	file: file,
				// })
				// emit("update:modelValue", idCardFrontImage.value);

				resolve(true); // 确认删除
			}).catch(() => {
				reject(false); // 取消删除
			});
		});
	};

	// 支付授权
	const paycode = () =>{
		router.push({
			name: 'payCode',
			params: {
				platform: zfbplatform.value,
				gdyLink: zfbgdyLink.value,
			}
		})
	};
</script>

<style lang="scss" scoped>
	.user-box {
		.uploadBox {
			padding: 0 0 0 20px;
		}

		.van-cell-group--inset {
			margin: 0;
		}

		:deep(.van-field__label) {
			font-weight: 700 !important;
		}

		background-color: #ffffff;

		/* 必填星号样式 */
		.required-label::before {
			content: '*';
			color: #ee0a24;
			margin-right: 4px;
		}

		/* 调整单选框间距 */
		.van-radio {
			margin-right: 20px;
		}

		/* 错误提示样式 */
		:deep(.van-field__error-message) {
			color: #ee0a24;
			font-size: 12px;
			margin-top: 4px;
		}
	}

	.wxshow {
		text-decoration: underline;
		color: #DB504F;
		cursor: pointer;
	}
</style>
